import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TextInput, Modal, Keyboard, Image } from "react-native";
import { GLOBAL } from '../../../../../config/global';
import { style } from '../../../../../theme/style';

const scale = GLOBAL.SCALE;

//驳回弹框
export class InputModel extends Component {

	constructor(props) {
		super(props);
		this.state = {
			keyboard: false
		}
		this.auditRemark = '';
	}


	componentWillMount () {
		this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
		this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
	}

	componentWillUnmount () {
		try {
			this.keyboardDidShowListener.remove();
			this.keyboardDidHideListener.remove();
		} catch (error) {
			console.log(error);
		}
	}

	_keyboardDidShow () {
		this.setState({ keyboard: true });
	}

	_keyboardDidHide () {
		this.setState({ keyboard: false });
	}

	render () {
		const { visible, btnPress, closePress, placeholderText, titleText, tipText, submitText } = this.props;
		const { keyboard } = this.state;
		const keyboardsStyle = keyboard ? { marginTop: -90 * scale } : null;
		return (
			<Modal animationType={"fade"}
				transparent={true}
				visible={visible}
				onRequestClose={() => { }}>
				<View style={[styles.refuseModal, keyboardsStyle]}>
					<TouchableOpacity activeOpacity={1} style={styles.top}>
					</TouchableOpacity>
					<View style={styles.refuseBox}>
						<View style={styles.refuseCell}>
							<View style={styles.modelTitle}>
								<Text style={styles.title}>提示</Text>
								<TouchableOpacity activeOpacity={0.5} onPress={() => closePress()}>
									<Image source={require('../../../../../imgs/close.png')} style={styles.closeIcon} />
								</TouchableOpacity>
							</View>
							<Text style={styles.text}>{titleText || "驳回原因"}</Text>
							<TextInput
								ref="reasonTextInput"
								style={styles.reasonTextInput}
								underlineColorAndroid='transparent'
								placeholderTextColor="#848A96"
								placeholder={placeholderText || "限定200字..."}
								maxLength={500}
								editable={true}
								multiline={true}
								onChangeText={(txt) => { this.auditRemark = txt }}
							/>
							<Text style={styles.tip}>{tipText || ''}</Text>
							<TouchableOpacity activeOpacity={0.5} style={styles.refuseBtn} onPress={() => {
								btnPress(this.auditRemark);
							}}>
								<Text style={styles.refuseBtnText}>{submitText || '提交'}</Text>
							</TouchableOpacity>
						</View>
					</View>
					<TouchableOpacity activeOpacity={1} style={styles.bottom}>
					</TouchableOpacity>
				</View>
			</Modal >
		);
	}
}

const styles = StyleSheet.create({
	text: {
		fontSize: 14 * scale,
		color: '#000',
		fontWeight: '600'
	},
	refuseBtn: {
		justifyContent: 'center',
		alignItems: 'center',
		width: 120 * scale,
		height: 30 * scale,
		backgroundColor: style.color.themeColor,
		borderRadius: 6,
		marginBottom: 14 * scale,
		marginLeft: 61 * scale
	},
	refuseBtnText: {
		fontSize: 12 * scale,
		fontWeight: '600',
		color: '#fff'
	},
	reasonTextInput: {
		marginTop: 10 * scale,
		marginBottom: 6 * scale,
		width: '100%',
		height: 80 * scale,
		borderWidth: 1,
		borderColor: '#E3E7F0',
		paddingTop: 5 * scale,
		paddingBottom: 3 * scale,
		paddingLeft: 5 * scale,
		paddingRight: 3 * scale,
		fontSize: 13 * scale,
		textAlignVertical: 'top'
	},
	refuseModal: {
		width: 375 * scale,
		height: GLOBAL.SCREEN_HEIGHT,
		backgroundColor: 'rgba(0, 0, 0, .3)',
		alignItems: 'center',
	},
	top: {
		height: 190 * scale,
		width: 375 * scale,
		backgroundColor: 'transparent',
	},
	bottom: {
		width: 375 * scale,
		height: 280 * scale,
		backgroundColor: 'transparent',
	},
	refuseBox: {
		backgroundColor: '#fff',
		borderRadius: 9,
		width: 282 * scale,
		alignItems: 'center',
	},
	refuseCell: {
		width: 242 * scale,
		paddingTop: 15 * scale,
		paddingBottom: 10 * scale,
	},
	modelTitle: {
		flexDirection: 'row',
		alignItems: 'center',
		marginBottom: 24 * scale
	},
	title: {
		flex: 1,
		fontSize: 16 * scale,
		fontWeight: '600'
	},
	closeIcon: {
		tintColor: style.color.themeColor,
		width: 14 * scale,
		height: 14 * scale
	},
	tip: {
		fontSize: 12 * scale,
		color: '#D0021B',
		marginBottom: 20 * scale
	}
})